html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dd,
dl,
dt,
li,
ol,
ul,
fieldset,
form,
label,
legend {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}
img {
    border: none;
}
p {
    margin-bottom: 0;
}
body,
a,
input,
button {
    font-family: "Microsoft Yahei", "Droid Sans Fallback", "Arial", "Helvetica", "sans-serif", "宋体";
    font-size: 14px;
    outline: none;
    color: #666;
    text-decoration: none;
    margin: 0 auto;
}
input,textarea {
    -webkit-appearance: none;
    outline: none;
    border: none;
}
input{
    -webkit-appearance: none;
    outline: none;
}
body,html{
    height: 100%;
    width: 100%;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
a {
    color: #428bca;
}
a:hover {
    text-decoration: none;
}
table {
    text-align: center;
    vertical-align: middle;
}
th {
    text-align: center;
    vertical-align: middle;
}
/*通用*/
.flt {
    float: left;
}
.frt {
    float: right;
}
.clr {
    clear: both;
}

.bz-bb {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

//设置宽高
.wh(@w, @h) {
    width: @w;
    height: @h;
}
.coverWH{
    width: 100%;
    height: 100%;
}
//定义margin值
.mt(@i) {
    margin-top: @i;
}
.ml(@i) {
    margin-left: @i;
}
.mr(@i) {
    margin-right: @i;
}
.mb(@i) {
    margin-bottom: @i;
}

//定义padding
.pt(@i) {
    padding-top: @i;
}
.pb(@i) {
    padding-bottom: @i;
}
.pl(@i) {
    padding-left: @i;
}
.pr(@i) {
    padding-right: @i;
}
//单行垂直居中
.hc(@i) {
    height: @i;
    line-height: @i;
}
//字体大小
.fz(@i){
    font-size: @i;
}
//定义三角形
.ltne(@height, @color) {
    //向左
    border-right: @height solid @color;
    border-top: @height solid transparent;
    border-bottom: @height solid transparent;
}
.rtne(@height, @color) {
    //向右
    border-left: @height solid @color;
    border-top: @height solid transparent;
    border-bottom: @height solid transparent;
}
.ttne(@height, @color) {
    //向上
    border-bottom: @height solid @color;
    border-left: @height solid transparent;
    border-right: @height solid transparent;
}
.btne(@height, @color) {
    //向下
    border-top: @height solid @color;
    border-left: @height solid transparent;
    border-right: @height solid transparent;
}
//定义等腰三角形,底边宽度可自定义
.ltne(@height, @width, @color) {
    border-right: @height solid @color;
    border-top: @width/2 solid transparent;
    border-bottom: @width/2 solid transparent;
}
.rtne(@height, @width, @color) {
    border-left: @height solid @color;
    border-top: @width/2 solid transparent;
    border-bottom: @width/2 solid transparent;
}
.ttne(@height, @width, @color) {
    border-bottom: @height solid @color;
    border-left: @width/2 solid transparent;
    border-right: @width/2 solid transparent;
}
.btne(@height, @width, @color) {
    border-top: @height solid @color;
    border-left: @width/2 solid transparent;
    border-right: @width/2 solid transparent;
}
//可自由定义三角形三边长度
.ltne(@height, @width1, @width2, @color) {
    border-right: @height solid @color;
    border-top: @width1 solid transparent;
    border-bottom: @width2 solid transparent;
}
.rtne(@height, @width1, @width2, @color) {
    border-left: @height solid @color;
    border-top: @width1 solid transparent;
    border-bottom: @width2 solid transparent;
}
.ttne(@height, @width1, @width2, @color) {
    border-bottom: @height solid @color;
    border-left: @width1 solid transparent;
    border-right: @width2 solid transparent;
}
.btne(@height, @width1, @width2, @color) {
    border-top: @height solid @color;
    border-left: @width1 solid transparent;
    border-right: @width2 solid transparent;
}
//定义按钮常规样式
  .yellowBtn{
        .wh(88%,1.1rem);
        margin-top: 0.5rem;
        border-radius: 0.66rem;
        margin-left: 6%;
        color: black;
        font-size: 0.42rem;
        border: 0 none;
        background: -webkit-linear-gradient(left, #fbdd32 , #f6b624); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #fbdd32 , #f6b624); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #fbdd32 , #f6b624); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #fbdd32 , #f6b624); /* 标准的语法 */
    }
    .blueBtn{
        position: absolute;
        bottom: 0.6rem;
        .wh(90%,1.35rem);
        border-radius: 0.66rem;
        margin-left: 5%;
        color: white;
        font-size: 0.42rem;
        border: 0 none;
        background: -webkit-linear-gradient(left, #48b6d3 , #0d65b9); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #48b6d3 , #0d65b9); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #48b6d3 , #0d65b9); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #48b6d3 , #0d65b9); /* 标准的语法 */
    }
     .yellowBtnLittle{
        .wh(1.82rem,0.72rem);
        margin-top: 0.91rem;
        border-radius: 0.3rem;
        margin-right: 0.28rem;
        color: black;
        font-size: 0.36rem;
        float: right;
        border: 0 none;
        background: -webkit-linear-gradient(left, #fbdd32 , #f6b624); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #fbdd32 , #f6b624); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #fbdd32 , #f6b624); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #fbdd32 , #f6b624); /* 标准的语法 */
    }
.btn(@w, @h, @r:5px, @fz:14px) {
    display: block;
    .wh(@w,@h);
    font: @fz/@h "microsoft yahei";
    text-align: center;
    text-decoration: none;
    border-radius: @r;
}
.btn(@w, @h, @r:5px) {
    display: block;
    .wh(@w,@h);
    text-align: center;
    text-decoration: none;
    border-radius: @r;
}
.tm(@content) {
    transform: @content;
    -webkit-transform: @content;
    -o-transform: @content;
    -moz-transform: @content;
    -ms-transform: @content;
}
.blur(@s) {
    filter:blur(%(~"%apx",@s));
    -webkit-filter: blur(%(~"%apx",@s));
    -ms-filter: blur(%(~"%apx",@s));
    -moz-filter: blur(%(~"%apx",@s));
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=@s, MakeShadow=false);
}
//只有两个函数的情况,向底部渐变
.tlg(@cs, @ce) {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f9ff+0,a1dbff+100 */
    background: @cs;
    /* Old browsers */
    background: -moz-linear-gradient(top, @cs 0%, @ce 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, @cs 0%,@ce 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, @cs 0%,@ce 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr = %("%a",argb(@cs)), endColorstr = %("%a",argb(@ce)),GradientType=0);
}
.tlg(@cs, @cc1, @cc2, @ce...) {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,43cff9+100 */
    background: extract(@arguments, 1);
    /* Old browsers */
    background: -moz-linear-gradient(top, extract(@arguments, 1) extract(@arguments, 2),extract(@arguments, 3) extract(@arguments, 4),extract(@arguments, 5) extract(@arguments, 6),extract(@arguments, 7) extract(@arguments, 8));
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, extract(@arguments, 1) extract(@arguments, 2),extract(@arguments, 3) extract(@arguments, 4),extract(@arguments, 5) extract(@arguments, 6),extract(@arguments, 7) extract(@arguments, 8));
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, extract(@arguments, 1) extract(@arguments, 2),extract(@arguments, 3) extract(@arguments, 4),extract(@arguments, 5) extract(@arguments, 6),extract(@arguments, 7) extract(@arguments, 8));
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr= %("%a",argb(extract(@arguments, 1))), endColorstr= %("%a",argb(extract(@arguments, 7))),GradientType=0 );
    /* IE6-9 */
}
//向左边渐变
.llg(@cs, @ce) {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f9ff+0,a1dbff+100 */
    background: @cs;
    /* Old browsers */
    background: -moz-linear-gradient(left, @cs 0%, @ce 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, @cs 0%,@ce 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, @cs 0%,@ce 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr = %("%a",argb(@cs)), endColorstr = %("%a",argb(@ce)),GradientType=1);
}
.llg(@cs, @cc1, @cc2, @ce...) {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,43cff9+100 */
    background: extract(@arguments, 1);
    /* Old browsers */
    background: -moz-linear-gradient(left, extract(@arguments, 1) extract(@arguments, 2),extract(@arguments, 3) extract(@arguments, 4),extract(@arguments, 5) extract(@arguments, 6),extract(@arguments, 7) extract(@arguments, 8));
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, extract(@arguments, 1) extract(@arguments, 2),extract(@arguments, 3) extract(@arguments, 4),extract(@arguments, 5) extract(@arguments, 6),extract(@arguments, 7) extract(@arguments, 8));
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, extract(@arguments, 1) extract(@arguments, 2),extract(@arguments, 3) extract(@arguments, 4),extract(@arguments, 5) extract(@arguments, 6),extract(@arguments, 7) extract(@arguments, 8));
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr= %("%a",argb(extract(@arguments, 1))), endColorstr= %("%a",argb(extract(@arguments, 7))),GradientType=0 );
    /* IE6-9 */
}
//径向渐变
.rg(@cs, @ce) {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f9ff+0,a1dbff+100 */
    background: @cs;
    /* Old browsers */
    background: -moz-radial-gradient(center,ellipse cover, @cs 0%, @ce 100%);
    /* FF3.6-15 */
    background: -webkit-radial-gradient(center,ellipse cover, @cs 0%,@ce 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, @cs 0%,@ce 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr = %("%a",argb(@cs)), endColorstr = %("%a",argb(@ce)),GradientType=1);
}
.ab() {
    content: "";
    display: block;
}
.clr() {
    &:after {
        .ab();
        clear: both;
    }
}
body,html{
    width: 100%;
    overflow: hidden;
}
//@media only screen and (min-width: 400px) {
//html {
//  font-size: 21.33333333px !important;
//}
//}
//@media only screen and (min-width: 414px) {
//html {
//  font-size: 22.08px !important;
//}
//}
//@media only screen and (min-width: 480px) {
//html {
//  font-size: 25.6px !important;
//}
//}

input:disabled {
    color: #666;
    opacity: 1;
    -webkit-text-fill-color: #666;
}
.re(@width) {
    @xs: 100px/(1080/@width);
    @media (max-width:(@width + 1px)) {
        html {
            font-size: @xs;
        } 
    }
    
    @media (min-width:(1080 + 2px)) {
        html {
            font-size: 100px;
        }
    }   
}
.re(1600px);
.re(1440px);
.re(1280px);
.re(1024px);
.re(960px);
.re(950px);
.re(900px);
.re(800px);
.re(773px);
.re(768px);
.re(750px);
.re(745px);
.re(736px);
.re(732px);
.re(667px);
.re(640px);
.re(600px);
.re(568px);
.re(533px);
.re(435px);
.re(414px);
.re(411px);
.re(384px);
.re(375px);
.re(360px);
.re(320px);